<template>
  <div class="Component-panel-Dialog">
    <el-dialog
      title="提示"
      :visible.sync="booleanss"
      top="30vh"
      :close-on-click-modal="false"
      @close="closes"
    >
      <span :style="speanstyles" class="Component-panel-span"
        >{{msg}}</span
      >
      <div slot="footer" class="dialog-footer">
        <el-button @click="Ready" :style="buttonstyle">{{buttonname}}</el-button>
        <el-button @click="Cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: "DialogComponent",
  props: {
    msg: {
      type: String,
      default: "",
    },
    centerDialogVisible: {
      type: Boolean,
      default:false,
    },
    jump: {
      type: Boolean,
      default:false,
    },
    speanstyles: {
      type: Object,
      default: "",
    },
    buttonstyle: {
      type: Object,
      default: "",
    },
    buttonname: {
      type: String,
      default: "",
    },
  },
  watch:{
    centerDialogVisible:{ //监听的对象
      deep:true, //深度监听设置为 true
      handler:function(newV,oldV){
        this.booleanss = this.centerDialogVisible
      }
    },
  },
  data() {
    return {
      booleanss:false,
    };
  },
  computed:{
    
  },
  created(){

  },
  mounted(){

  },
  methods: {
    Ready(){
      this.$emit("click","Ready");
    },
    Cancel(){
      this.$emit("click","Cancel");
    },
    closes(){
      this.$emit("click","centerDialogVisible");
    }
  },
};
</script>

<style lang="less">
/* 弹出框的宽高度 */
.Component-panel-Dialog .el-dialog {
  width: 640px;
  height: 380px;
  border-radius: 20px;
  // margin-top: 30vh;
}
.Component-panel-Dialog .el-input__inner {
  width: 460px;
  font-size: 24px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #1b1b1d;
}
.Component-panel-Dialog .el-dialog__body {
  padding: 70px 0px 0px 0px;
}
.Component-panel-Dialog .el-dialog__footer {
  padding: 65px 20px 20px 90px;
}

.Component-panel-Dialog .el-dialog__title {
  width: 149px;
  height: 23px;
  font-size: 24px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #81859c;
}

.Component-panel-Dialog .el-button {
  width: 200px;
  height: 60px;
  margin-right: 60px;
  font-size: 24px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  border-radius: 10px;
}
.Component-panel-Dialog .el-form-item__label {
  width: 42px;
  height: 17px;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859c;
}
.Component-panel-Dialog .el-button span {
  color: #ffffff;
}
.Component-panel-span{
  width:100%;
  height:30px;
  font-size: 24px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #81859c;
  line-height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Component-panel-Dialog .el-button:nth-child(2) {
  background: #81859c;
}
</style>
